<template >
<div>
<view class="container">
<view style="height:174px;background:#C6B17C;width:100vw;">
  <view v-if='authorization==1' class="profile-info">
    <div class="profile-title">
      <section>
        <img :src="userImg" class="head-portrait">
      </section>
      <section class="head-sname">{{nickName}}</section>
    </div>
 
  </view>
 <!-- <div v-lese></div> -->
 <view v-if='authorization==2' class="profile-info">
    <div class="profile-title">
      <section>
        <img  src="/static/images/ic_menu_me.png" class="head-portrait"/>
      </section>
       <button style="width:30vw;height:40px;line-height:40px;paddingt:0;fongt-size:13px;" open-type="getUserInfo" @getuserinfo="bindGetUserInfo" @click="getUserInfo1">点击授权</button> 
    </div>
 
  </view>
 
</view>
  <!--  -->
    <div class="profile"  >
    
    <div  class="profile-tab">
      <div  v-if='userToken' class="flex-sb">
        <div @click="collectionPro" class="flex-row-center center">{{followProductNum}}</div>
        <div @click="collectionFac" class="flex-row-center center">{{followStoreNum}}</div>
        <div @click="footprint" class="flex-row-center center">{{footStepNum}}</div>
      </div>
      <div class="flex-sb">
        <div @click="collectionPro" class="flex-row-center center">收藏宝贝</div>
        <div @click="collectionFac"  class="flex-row-center center">关注厂家</div>
        <div @click="footprint" class="flex-row-center center">足迹</div>
      </div>
    </div>

    <div class="profile-order">
      <!-- <mt-cell title="我的订单" value="查看全部订单" is-link to="/allOrder"></mt-cell> -->
      <navigator  hover-class="none" @click='todetails(0)'   >
    <div title="我的订单" class="set-cell-order set15">
      
      <div class="flex-row">
         
        <span>我的订单</span>
          
      </div>
      <img  style="width:8px;height:13px;margin-right:5vw;float:right;margin-top:11px" class="icon iconfont" src="/static/images/go.png"/> 
      
    </div>
     </navigator>
      <div class="profile-img">
        <div class="section">
            <navigator  hover-class="none" @click='todetails(1)'   >
              <div color="#f44" style="font-size: 10px; padding: 2px;" v-if="account.buyerNum>0">{{account.buyerNum}}</div>
              <img :src="pendingPayment" style="width:25.5px;">
                <b>待付款</b>
           </navigator>
        </div>
        <div class="section">
           <navigator  hover-class="none" @click='todetails(2)'   >
          <div color="#f44" style="font-size: 10px; padding: 2px;" v-if="account.payNum>0">{{account.payNum}}</div>
          <img :src="pendingDelivery" style="width:31.5px;"><b>待发货</b>
           </navigator>
        </div>
        <div class="section">
           <navigator  hover-class="none" @click='todetails(3)'  >
            <div color="#f44" style="font-size: 10px; padding:2px;" v-if="account.deliveryNum>0">{{account.deliveryNum}}</div>
            <img :src="pendingCollect" style="width:21px;"><b>待收货</b>
           </navigator>
        </div>
        <div class="section">
           <navigator  hover-class="none" @click='todetails(4)'   >
              <div color="#f44" style="font-size: 10px; padding:2px;" v-if="account.receiveNum>0">{{account.receiveNum}}</div>
              <img :src="pendingComment" style="width:19px;"><b>待评论</b>
           </navigator>
        </div>
        <div class="section">
          <img :src="pendingRefund" style="width:24px;"><b>退款中</b>
        </div>
      </div>
    </div>
    <div title="快速补货"  class="set-cell set15">
      <div class="flex-row">
        <img slot="icon" :src="replenishment" class="img">
        <span>快速补货</span>
      </div>
      <img  style="width:8px;height:13px;margin-right:5vw;float:right;margin-top:18.5px" class="icon iconfont" src="/static/images/go.png"/>
       <div style="height:1px;position: absolute;;left:5vw;bottom:0  ;width:95vw;background:#e6e6e6"></div> 
    </div>
    <div title="我的卡券" class="set-cell">
      
        <div class="flex-row">
          <img slot="icon" :src="coupons" class="img">
          <span>我的卡券</span>
        </div>
        <img  style="width:8px;height:13px;margin-right:5vw;float:right;margin-top:18.5px" class="icon iconfont" src="/static/images/go.png"/> 
       
    </div>
    <div title="我要开分店"  class="set-cell set15">
      <div class="flex-row">
        <img slot="icon" :src="shop" class="img">
        <span>我要开分店</span>
      </div>
      <img  style="width:8px;height:13px;margin-right:5vw;float:right;margin-top:18.5px" class="icon iconfont" src="/static/images/go.png"/> 
    </div>
    <div title="我的问答"  class="set-cell set15">
      <div class="flex-row">
        <img slot="icon" :src="interlocution" class="img">
        <span>我的问答</span>
      </div>
      <img  style="width:8px;height:13px;margin-right:5vw;float:right;margin-top:18.5px" class="icon iconfont" src="/static/images/go.png"/> 
       <div style="height:1px;position: absolute;;left:5vw;bottom:0  ;width:95vw;background:#e6e6e6"></div>
    </div>
    <div title="我的评价" class="set-cell">
      <div class="flex-row">
        <img slot="icon" :src="evaluate" class="img">
        <span>我的评价</span>
      </div>
      <img  style="width:8px;height:13px;margin-right:5vw;float:right;margin-top:18.5px" class="icon iconfont" src="/static/images/go.png"/> 
    </div>
    <div title="设置"  class="set-cell set15">
      <div class="flex-row">
        <img slot="icon" :src="set" class="img">
        <span>设置</span>
      </div>
      <img  style="width:8px;height:13px;margin-right:5vw;float:right;margin-top:16.5px" class="icon iconfont" src="/static/images/go.png"/> 
    </div>
    <div style="background:#f4f4f4;height:80px;width:100vw;"></div>
  </div>
  
  
    
</view>

</div>
</template>

<script>
import wx from 'wx';
import getCurrentPages from 'wxFunction';
import user from '@/services/user';
import api from '@/utils/api';
var app = getApp();

export default {
  data () {
    return {
      authorization:0, //  1为已授权 2为未授权
      userInfo: '555',
      userImg:'44',
      nickName:'',
      canIUse: wx.canIUse('button.open-type.getUserInfo'),
         replenishment: '/static/images/profile/mywindmill_replenishment.png',
      interlocution: '/static/images/profile/mywindmill_interlocution.png',
      coupons: '/static/images/profile/My-windmill_card-coupons@2x.png',
      shop: '/static/images/profile/mywindmill_shop.png',
      evaluate: '/static/images/profile/mywindmill_evaluate.png',
      set: '/static/images/profile/mywindmill_set.png',
      pendingPayment: '/static/images/profile/pendingPayment.png',
      pendingDelivery: '/static/images/profile/pendingDelivery.png',
      pendingCollect: '/static/images/profile/pendingCollect.png',
      pendingDelivery: '/static/images/profile/pendingDelivery.png',
      pendingComment: '/static/images/profile/pendingComment.png',
      pendingRefund: '/static/images/profile/pendingRefund.png',
      come: '/static/images/come.png',
      follow: null,
      userInfo: null,
      account: {'buyerNum':0,'payNum':0,'deliveryNum':0,'receiveNum':0},
      followProductNum:'',
      followStoreNum:'',
      footStepNum:'',
      userToken:''
    }
  },
  onShow () {
    console.log('全局变量', app);
    let userInfo = wx.getStorageSync('userInfo');
    let token = wx.getStorageSync('token');
    // console.log('缓存中的个人信息userInfo', userInfo);
    // console.log('缓存中的个人信息token', token);
    if (userInfo && token) {
      app.globalData.userInfo = userInfo;
      app.globalData.token = token;
    } else {
      app.globalData.userInfo = null;
      app.globalData.token = null;
    }
    if (app.globalData.userInfo) {
      this.userInfo = app.globalData.userInfo;
    } else {
      this.userInfo = {};
    }
     this.myFollow()
     this.getSetting()
     this.userToken=wx.getStorageSync('token');
  },
mounted(){
  
 

},
onPullDownRefresh(){
 wx.stopPullDownRefresh();//结束下拉加载
},
  methods: {
    // 点击登陆
  
      getSetting(){
        let that =this
      wx.getSetting({
        success: function(res){
          if (res.authSetting['scope.userInfo']) {
            wx.getUserInfo({
              success: function(res) {
                console.log(res)
                 that.userImg=res.userInfo.avatarUrl;
                that.nickName=res.userInfo.nickName;
                that.authorization=1;
         
                //用户已经授权过
                console.log('用户已经授权过')
                wx.login({
                  success (res) {
                      console.log(res,222)
                    if (res.code) {
                      //发起网络请求
                       that.getOpenId(res.code)
    
                // if (res.code) {
                //   //发起网络请求
                //       wx.request({
                //         url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxc124c5d7c8cc47fd&secret=b852d2ec926ae8293370ba34743ca398&js_code='+res.code+'&grant_type=authorization_code',
                //          success:function(res){
                //            console.log(res.data.openid)
                //          }
                //       })
                    
                // } else {
                //   console.log('登录失败！' + res.errMsg)
                // }
                        }

                  }
                })
              }
            })
          }else{
            console.log('用户还未授权过')
            that.authorization=2;
          }
        }
      })

    },
    async getOpenId (code) {
    
      // console.log('地址管理,请求结果', res);
        let data=JSON.stringify( { "code":code, "payClient":"jsapi_buyer_mini"})
        const res = await api.getOpenId({"data":data});
        wx.setStorageSync('openId',res.data.openId)
    },
    getUserInfo1(){
      console.log('click事件首先触发')
      // 判断小程序的API，回调，参数，组件等是否在当前版本可用。  为false 提醒用户升级微信版本
      // console.log(wx.canIUse('button.open-type.getUserInfo'))
      if(wx.canIUse('button.open-type.getUserInfo')){
        // 用户版本可用
      }else{
        console.log('请升级微信版本')
      }
    },
    bindGetUserInfo(e) {
      // console.log(e.mp.detail.rawData)
      if (e.mp.detail.rawData){
        //用户按了允许授权按钮
        console.log('用户按了允许授权按钮')
        // 后续再次获取用户信息
        this.getSetting();
      } else {
        //用户按了拒绝按钮
        console.log('用户按了拒绝按钮')
      }
    },

  // getUserInfo () {
  //     // 调用登录接口
  //     wx.login({
  //       success: () => {
  //         wx.getUserInfo({
  //           success: (res) => {
               
  //             this.userInfo = res.userInfo
  //             this.userImg=this.userInfo.avatarUrl;
  //             this.nickName=this.userInfo.nickName;
              
  //            console.log(res)
  //           }
  //         })
  //       }
  //     })
  //   },
  async  myFollow() {
      // 收藏&关注&足迹
        let data=JSON.stringify({})
        const res = await api.FollowTotalInfo({"data":data});
       this.followProductNum=res.data.followProductNum;
       this.followStoreNum=res.data.followStoreNum;
       this.footStepNum=res.data.footStepNum;
 
    },
    todetails(index){
      this.loginIf();
      wx.navigateTo({
          url: '/pages/ucenter/order?order='+index  
        });
    },
    collectionPro() {
     this.loginIf();
      wx.navigateTo({
          url: '/pages/ucenter/CollectBaby?title=收藏宝贝' 
        });
    },
    collectionFac() {
       this.loginIf();
       wx.navigateTo({
          url: '/pages/ucenter/manufacturerList?title=关注厂家' 
        });
   
    },
    footprint() {
       this.loginIf();
          wx.navigateTo({
          url: '/pages/ucenter/CollectBaby?title=足迹' 
        });
  
    },
   loginIf(){
        if(!wx.getStorageSync('token')){ 
         wx.navigateTo({ //redirectTo
              url: '../login/login'
            })
          return false; 
     }
   },
    // 退出登陆
    exitLogin () {
      wx.showModal({
        title: '',
        confirmColor: '#b4282d',
        content: '退出登录？',
        success: function (res) {
          if (res.confirm) {
            wx.removeStorageSync('token');
            wx.removeStorageSync('userInfo');
            wx.switchTab({
              url: '/pages/ucenter/index',
              success: function (e) {
                // console.log('getCurrentPages的页面栈', getCurrentPages());
                var page = getCurrentPages().pop();
                // console.log('当前page', page);
                if (page === undefined || page === null) return;
                page.onShow();
              }
            });
          }
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>


.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-row {
 float: left;
}

.flex-row-center {
  display: flex;
  align-items: center;
  width: 100%;
}

.flex-content-center {
  display: flex;
  justify-content: center;
  width: 100%
}

.flex-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-sb-start {
  display: flex;
  justify-content: space-between;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.ellipsis {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.fit-parent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.center{
  justify-content:center;
}
 
 .profile-title{
      height: 174px;
      background: #C6B17C;
      width: 100vw;
      section{
        margin: 0 auto;
        text-align: center;
        .head-portrait{
          width: 60px;
          height: 60px;
          object-fit: cover;
          border-radius: 50%;
          margin: 18px auto 18px;
        }
      }
      .head-sname{
        font-size: 14px;
        color: #fff;
        letter-spacing: 1px;
      }
    }
    .profile{
    background: #f4f4f4;
    
    .mint-cell{
      border-bottom: 1px solid #e6e6e6;
    }
    .set15{
      margin-top: 15px;
    }
    .set-cell{
      height: 50px;
      line-height: 50px;
      position: relative;
      background: #fff;
      font-size: 16px;
      color: #333333;
      .flex-row{
        margin-left: 4vw;
      }
      .img{
        width: 18px;
        height: 18px;
        margin-right: 13.5px;
        object-fit: contain;
        vertical-align: middle;
      }
    }
    .set-cell-order{
      height: 34px;
      line-height: 34px;
      border-bottom:1px solid rgba(51,51,51,0.1);
      background: #fff;
      color: #333;
      font-size: 14px;
      .flex-row{
        padding-left: 5vw;
      }
    }
    .profile-title{
     
       
      .section{
        margin: 0 auto;
        text-align: center;
        .head-portrait{
          width: 60px;
          height: 60px;
          object-fit: cover;
          border-radius: 50%;
          margin: 28px auto 18px;
        }
       
      }
      .head-sname{
        font-size: 14px;
        color: #fff;
        letter-spacing: 1px;
      }
    }
    .profile-tab{
      padding: 10px 0;
      background: #fff;
      .section, .center{
        font-size: 13px;
        color: #000;
      }
    }
    .profile-img{
      // float: left;
      background: #fff;
      height: 83px;
      overflow: hidden;
      .section{
        float: left;
        width: 20vw;
        text-align: center;
        margin-top: 6px;
        position: relative;
        .mint-badge{
          position: absolute;
          right: 1vw; top: 0;
          width: 18px;
          height: 18px;
        }
        img{
          margin-top: 10px;
          height: 25px;;
        }
        b{
          display: inline-block;
          width: 20vw;
          text-align: center;
          font-size: 13px;
        }
      }
    }
  }
</style>
